<template>
  <div class="relative-fill page_login-container flex flex-justify-center flex-align-center">
    <div class="login_panel-container flex">
      <div class="login_panel-left">
        <lottie-web url="/login.json" />
      </div>
      <div class="login_panel-right">
        <h3>用户登录</h3>
        <p>欢迎使用xx平台，输入账号密码登录</p>
        <a-form size="large" :model="form" layout="vertical" @submit="handleSubmit">
          <a-form-item row-class="login_form-item" field="name" label="用户名">
            <a-input v-model="form.name" placeholder="请输入您的用户名" />
          </a-form-item>
          <a-form-item row-class="login_form-item" field="post" label="密码">
            <a-input v-model="form.post" type="password" placeholder="请输入您的密码" />
          </a-form-item>
          <a-form-item row-class="login_form-item" field="isRead">
            <a-checkbox v-model="form.isRead">记住密码</a-checkbox>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" class="w-full">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const form = reactive({
  name: '',
  post: '',
  isRead: false,
});
const handleSubmit = () => {};
</script>

<style lang="less" src="./index.less" scoped></style>
